<template>
  <div class="container">
    <el-button @click="handleOutput2" type="primary"> 测试导出 </el-button>
    <main id="pdf6" class="main">
      <div class="header"></div>
      <div class="main2">
        <div class="main2-item" v-for="(item, index) in liNum" :key="index">
          第{{ index }}
        </div>
      </div>
      <div class="footer"></div>
    </main>
  </div>
</template>

<script>
import { PdfLoader } from "../../utils/pdfLoader";

export default {
  data() {
    return {
      liNum: 10,
    };
  },

  components: {},

  created() {},

  mounted() {},

  methods: {
    handleOutput2() {
      const loading = this.$loading({
        lock: true,
        text: "导出中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      const element = document.querySelector("#pdf6");
      //   const header = document.querySelector(".pdf-header");
      //   const footer = document.querySelector(".pdf-footer");

      const pdfLoader = new PdfLoader(element, {
        // footer: footer,
        // header: header,
        // outputType:'file',
        fileName: "自定义名字",
        direction: "p",
        isPageMessage: true,
      });
      pdfLoader.getPdf().then((res) => {
        console.log("[ 导出成功] >", res);
        loading.close();
        this.$message.success("导出成功");
      });
    },
  },
};
</script>
<style scoped lang="less">
.main {
  height: 25000px;
  width: 1200px;
  background-color: antiquewhite;
  margin: 0 auto;

  margin-top: 100px;
  .header {
    width: 820px;
    margin: 0 auto;
    height: 300px;
    background-color: rgb(133, 139, 139);
  }

  .main2 {
    width: 600px;
    margin: 0 auto;
    margin-top: 200px;
  }

  .main2-item {
    height: 200px;
    background-color: orange;
    margin: 20px;
  }

  .footer {
    width: 820px;
    margin: 0 auto;
    height: 300px;
    background-color: pink;
    margin-top: 100px;
  }
}
</style>
